import React, { useEffect, useState } from 'react';
import { Button, Popconfirm, Table } from 'antd';
import type { TableProps } from 'antd';

interface DataType {
  id: string;
  name: string;
}

const ProductList: React.FC<{
  products: DataType[];
  onDelete: (id: string) => void;
}> = ({ onDelete, products }) => {
  const [columns, setColumns] = useState<TableProps<DataType>['columns']>([
    {
      title: 'Name',
      dataIndex: 'name',
    },
    {
      title: 'Actions',
      render(text, record) {
        return (
          <Popconfirm title="Delete?" onConfirm={() => onDelete(record.id)}>
            <Button>Delete</Button>
          </Popconfirm>
        );
      },
    },
  ]);
  useEffect(() => {
    const timer = setTimeout(() => {
      setColumns([]); // 清空列
    }, 3000);

    return () => clearTimeout(timer); // 清理定时器
  }, []);

  return <Table rowKey="id" dataSource={products} columns={columns} />;
};

export default ProductList;
